<template>
  <section>
    <!-- 已收费 -->
    <table border="0" width="100%" style="border-spacing: 0;border-collapse: collapse;">
      <tr>
        <td style="font-size:18px;">已收费列表</td>
        <td></td>
        <td style="text-align:right;vertical-align: top;">
          <el-form :inline="true">
            <el-form-item>
              <el-select
                v-model="form.patientId"
                filterable
                clearable
                remote
                reserve-keyword
                placeholder="请输入患者名字"
                :remote-method="remoteMethod"
                :loading="loading"
              >
                <el-option v-for="item in options" :key="item.patientId" :label="item.name" :value="item.patientId"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item>
              <el-select v-model="form.source" placeholder="请选择来源">
                <el-option key="1" label="诊疗收费" :value="1"></el-option>
                <el-option key="3" label="套餐收费" :value="3"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item>
              <el-date-picker v-model="form.startTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>----
              <el-date-picker v-model="form.endTime" class="pay_date" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" circle icon="el-icon-search" @click="getData(-1)"></el-button>
            </el-form-item>
          </el-form>
        </td>
      </tr>
    </table>

    <div class="retail_box">
      <el-col
        v-for="(item, index) in tabList"
        :key="index"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="6"
        class="reserve-user-list"
        style="padding-left: 10px; padding-right: 10px;"
      >
        <div v-if="item.patientInfo != undefined" :class="['card-box', 'bg-sy']">
          <div class="card-nr">
            <!-- <div>
              <img
                v-if="!item.patientInfo.head"
                src="@/img/unknown-avatar.png"
                alt
                class="head-img"
                style="width:70px;height:70px;"
              />
              <img
                v-else
                :src="item.patientInfo.head | imageUrl"
                class="head-img"
                alt
                style="width:70px;height:70px;"
              />
            </div>-->
            <div v-if="item.patientInfo">
              <img
                v-if="item.patientInfo.head == undefined || item.patientInfo.head == ''"
                src="@/img/unknown-avatar.png"
                alt
                class="head-img"
                style="width:70px;height:70px;"
              />
              <img v-else :src="item.patientInfo.head | imageUrl" class="head-img" alt style="width:70px;height:70px;" />
            </div>
            <div v-if="item.patientInfo == undefined">
              <img v-if="item.patientInfo == undefined" src="@/img/unknown-avatar.png" alt class="head-img" style="width:70px;height:70px;" />
            </div>
            <div style="overflow: hidden;">
              <p class="overflow-omit" v-if="item.patientInfo">
                <span style="font-size:18px;">{{ item.patientInfo.name }}</span>
                &nbsp;
                <span>({{ item.patientInfo.sex | toSex }}&nbsp;{{ item.patientInfo.age }}岁)</span>
              </p>
              <!-- <div style="margin-top:5px;" class="overflow-omit" >登记科室：{{item.deptName}}（{{item.registerName}}）</div> -->
              <div class="overflow-omit">
                <span v-if="item.doctor != undefined">接诊医生：{{ item.doctor.trueName ? item.doctor.trueName : "无" }}</span>
                <!-- &nbsp;<span>等候：{{item.gmtCreate|computeHour}}</span> -->
              </div>
              <div class="overflow-omit">
                <span>收费时间：{{ item.payTime }}</span>
                <!-- <span v-if="item.dateDay"></span> -->
                <!-- <span v-else>无</span> -->
              </div>
              <div class="overflow-omit">收费人员：{{ item.hpMember.memberName ? item.hpMember.memberName : "无" }}</div>
            </div>
          </div>
          <div class="card-footer">
            <div @click="getDetail(item)">收费：￥{{ item.realityMoney }}</div>
            <div v-if="item.source != 3" @click="doPrint(item)">打印清单</div>
            <div v-if="item.source != 3" @click="sof(item)">退费</div>
            <!-- <div>打印发票</div>
            <div>退费</div>-->
          </div>
          <!-- <div v-if="item.patientInfo.levelId" class="vip-box">
            <el-tooltip :content="item.patientInfo.levelName" placement="top">
              <img src="@/img/icon-vip.png" alt />
            </el-tooltip>
          </div> -->
          <!-- <div class="zt-box">登记&nbsp;{{item.gmtCreate|toDengjiTime}}</div> -->
          <!-- <div v-if="item.levelId" class="vip-box">
            <el-tooltip :content="item.patientInfo.levelName" placement="top">
              <img src="@/img/icon-vip.png" alt />
            </el-tooltip>
          </div>-->
        </div>
      </el-col>
      <br />
      <el-col :span="24">
        <pager v-model="pager" @change-pagenum="getData"></pager>
      </el-col>
    </div>
    <iframe v-show="showOrder" frameborder="0" height="0px" width="0px" ref="iframe" src="/print/charge.html"></iframe>
    <!-- <print v-if="showOrder" :orderId="orderId" :name="memberName" :time="endTime" :detail="detail" :total="total"></print> -->
  </section>
</template>
<script>
export default {
  data() {
    return {
      form: {
        status: 2,
        source: "",
        patientId: "",
        startTime: "",
        endTime: ""
      },
      endTime: "",
      memberName: "",
      showOrder: false,
      orderId: "",
      pager: { pageSize: 12, pageNum: 1, total: 0 },
      tabList: [],
      loading: false,
      total: 0,
      options: [],
      iframeContent: {}
    };
  },
  created() {
    this.form.startTime = this.getNewDate();
    this.form.endTime = this.getNewDate();
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(type) {
      let th = this;
      th.showLoading();
      if (type == -1) {
        th.pager.pageNum = 1;
        th.pager.total = 0;
      }
      let j = {};
      j = Object.assign(th.form, th.pager);
      th.$api.getOrder(j).then(res => {
        if (res.executed) {
          th.showLoading(false);
          th.tabList = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        } else {
          th.$message.error(res.message);
          th.showLoading(false);
        }
      });
    },
    //模糊搜索
    remoteMethod(query) {
      let th = this;
      if (query !== "") {
        th.loading = true;
        setTimeout(() => {
          th.loading = false;
          th.$api
            .getThePatientLibraryList({
              nameOrMobile: query,
              hpId: th.adminUser.hpId,
              pageNum: 1,
              pageSize: 100
            })
            .then(res => {
              if (res.executed) {
                if (res.dataBody != undefined) {
                  let List = res.dataBody.list;
                  th.options = List.filter(item => {
                    return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
                  });
                  // th.tableList = Arrary;
                  // th.pager.total = res.dataBody.total;
                } else {
                  th.tableList = [];
                  th.pager.total = 0;
                }
              }
            });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //获取详情
    getDetail(obj) {
      let th = this;
      let j = {};
      if (obj != null) {
        if (obj.source == 1) {
          j = {
            id: th.jiaMi(obj.cure.id),
            total: obj.totalMoney,
            type: 1,
            orderId: obj.orderId,
            orderCode: obj.orderCode,
            patientId: th.jiaMi(obj.patientId)
          };
        } else {
          j = {
            id: th.jiaMi(obj.sourceId),
            total: obj.totalMoney,
            type: 1,
            orderId: obj.orderId,
            orderCode: obj.orderCode,
            patientId: th.jiaMi(obj.patientId)
          };
        }
        th.$router.push({
          path: "/page/chargeParticulars",
          query: th.getUrlToken(j)
        });
      }
    },
    sof(obj) {
      let th = this;
      let j = {
        id: th.jiaMi(obj.cure.id),
        orderId: th.jiaMi(obj.orderId),
        patientId: th.jiaMi(obj.patientId)
      };
      th.$router.push({
        path: "/page/chargeReturn",
        query: th.getUrlToken(j)
      });
    },
    doPrint(items) {
      let th = this;
      th.showOrder = true;
      th.showLoading();
      let doctor = "";
      let dept = "";
      if (items.doctor) {
        doctor = items.doctor.trueName;
        // 需要改打印科室名称
        dept = items.doctor.professionalDeptName;
      }
      th.$api.getOrderItem({ orderId: items.orderId }).then(res => {
        if (res.executed) {
          let item = res.dataBody.pageInfo.list;
          th.iframeContent = this.$refs.iframe.contentWindow;
          let list = [];
          let total = 0;
          for (let i = 0; i < item.length; i++) {
            let arr = {};
            Object.assign(arr, item[i]);
            if (i != 0) {
              if (i % 40 == 0) {
                arr.realityMoney = Number(arr.realityMoney).toFixed(2);
                // arr.discountMoney = 0;
                arr.show = false;
                total += Number(arr.realityMoney);
                // list.push({ show: true });
              } else {
                arr.realityMoney = Number(arr.realityMoney).toFixed(2);
                // arr.discountMoney = 0;
                arr.show = false;
                total += Number(arr.realityMoney);
              }
            } else {
              arr.realityMoney = Number(arr.realityMoney).toFixed(2);
              // arr.discountMoney = 0;
              arr.show = false;
              total += Number(arr.realityMoney);
            }
            list.push(arr);
          }
          let bill = res.dataBody.billPayways;
          th.iframeContent.postMessage(
            {
              cmd: "postJson",
              params: JSON.stringify({
                detail: items.patientInfo,
                list: list,
                bill: bill,
                doctor: doctor,
                dept: dept,
                logo: th.adminUser.printLogo,
                total: items.realityMoney,
                memberName: items.hpMember.memberName,
                endTime: items.payTime,
                hospitalName: th.adminUser.hospitalName
              })
            },
            "*"
          );
          th.showLoading(false);
        }
      });
    }
  },
  components: {
    print: () => import("../_com/printTotal")
  }
};
</script>
<style lang="scss" scoped>
@import "../../_css/reserve.scss";
.pay_date {
  width: 40% !important;
}
</style>
